<!-- https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg -->
<!-- https://passport.baidu.com/static/passpc-account/img/baidu.png -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../0907day/css/bootstrap.css">
    <script src="../0907day/js/jquery.min.js"></script>
    <script src="../0907day/js/popper.min.js"></script>
    <script src="../0907day/js/bootstrap.min.js"></script>
    <script src="./01.js"></script>
    <style>
        .box {
            background-image: url(./reg_bg_min\ \(1\).jpg);
            position: fixed;
            left: 0;
             right: 0;
             top: 0;
             bottom: 0;
             background-size: cover;
        }

        .big {
            /* border: 1px solid red; */
            width: 100%;
            height: 716.6px;
        }

        .big-1 {
            /* border: black 1px solid; */
            /* width: 200px; */
            /* height: 40px; */
            margin-top: 50px;
            margin-left: 70px;
        }

        .big-2 {
            /* border: black solid 1px; */
            width: 322.3px;
            height: 75px;
            margin-left: 195px;
            margin-top: 160px;
        }

        .big-3 {
            /* border: black solid 1px; */
            width: 350px;
            height: 70px;
            margin-left: 220px;
            margin-top: 55px;
        }

        .body-right {
            float: right;
            width: 455px;
            height: 486px;
            background-color: white;
            margin-right: 180px;
            margin-top: -350px;
            border-radius: 10px;
        }

        .body-right-next {
            display: inline;
            margin-top: -10px;
            /* border: 1px solid black; */
        }

        .inp {
            width: 242px;
            height: 35px;
            border: 1px solid #ccc;
        }

        .safe {
            padding-left: 170px;
        }

        .safe em {
            padding: 0 12px;
            color: #fff;
        }

        .ruo {
            background-color: #de1111;
        }

        .zhong {
            background-color: #40b83f;
        }

        .qiang {
            background-color: #f79100;
        }

        .agree {
            padding-left: 95px;
            margin-left: -9%;
        }

        .agree input {
            vertical-align: middle;
            /*垂直样式居中*/
        }

        .agree a {
            color: #1ba1e6;
        }

        .btn {
            width: 200px;
            height: 34px;
            background-color: #c81623;
            font-size: 14px;
            color: #fff;
            margin: 30px 0 0 70px;
            margin-left: 150px;
        }

        /*main区域end*/
        /*footer区域start*/
        footer {
            position: absolute;
            width: 100%;
            height: 56px;
            background-color: #CCCCCC;
            bottom: -250px;
        }

        .footer_box {
            width: 1236px;
        }

        footer .left {
            float: left;
            height: 56px;
            line-height: 56px;
            margin-left: 100px;
        }

        footer .left a {
            color: whitesmoke;
        }

        footer .right {
            float: right;
            color: white;
            height: 56px;
            line-height: 56px;
            text-align: center;
            margin-right: 100px;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrapper {
            width: 500px;
            height: 75px;
            margin: 80px auto;
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-top: 73px;
        }
        .input_box{
            height: 100px;
            width: 80%;
            align-items: center;
        }
        .input_box input {
            width: 82%;
            height: 30px;
            border: none;
            outline: none;
            border: 1px solid #D2B48C;
            border-radius: 12px;
            margin: 10px 0px;
            padding-left: 15px;
        }
        .eye_icon{
            width: 20px;
            height: 20px;
            background-image: url('./open_eye.png');
            background-repeat: no-repeat;
            background-position: center content;
            background-size: cover;
            margin-left: 10px;
        }
        .wrapper p {
            width: 80%;
            height: 60px;
            line-height: 26px;
            font-size: 14px;
            color: #339999;
        }

        .pwdStrength {
            width: 80%;
            list-style: none;
            height: 30px;
            display: none;
            flex: 1;
        }

        .weak,
        .middle,
        .strong {
            height: 15px;
            width:100px;
            border: 1px solid black;
            background: rgb(238, 238, 238);
    
        }

        .middle {
            border-left: 0;
            border-right: 0;
        }

        .result {
            width: 30px;
            height: 15px;
            font-size: 14px;
            line-height: 14px;
            text-align: center;
            margin-left: 10px;
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="big">
            <div class="big-1">
                <!-- <img src="./8CU9X4E}ASG_YH9CD408JU1.png" width="150px" alt=""> -->
                <h1 style="color: rgb(4, 4, 75); font-size: 45px; margin-top: 0px;"><strong>汽车之家</strong></h1>
            </div>
            <div class="big-2">
                <h3 style="color: white; font-size: 55px;">汽车之家</h3>
            </div>
            <div class="big-3">
                <p style="color: white; font-size: 30px;">量身订购属于自己的爱车</p>
            </div>
            <div class="body-right">
                <div>
                    <h3 style="font-size: 40px; margin-left: 9%; margin-top: 20px; margin-bottom: 0;">欢迎注册</h3>
                </div>
                <div>
                    <p class="body-right-next" style="margin-left: 9%;">已有账号？</p><a href="./b.html"
                        class="body-right-next">登录</a>
                </div>
                <div>
                    <form class="form-group" action="/regin" method="post">
                    
                        <div class="wrapper">
                            <div class="input_box">
                           账号： <input type="text" name="uname" placeholder="请输入账号" id="">
                           密码： <input type="password" name="upwd"  placeholder="请输入密码" oninput="passValidate(this)" id="inputPwd" value="">
                             <div class="eye_icon"></div>
                            </div>
                             <p>请使用字母、数字、符号两种类型组合的密码，长度为6~20位。</p>
                             <ul class="pwdStrength">
                                 <li class="weak"></li>
                                 <li class="middle"></li>
                                 <li class="strong"></li>
                                 <li class="result"></li>
                             </ul>
                         </div>
                        <ul>
                            <li class="agree"><input type="checkbox" onclick="if(this.checked) {enable()} else {disable()}">
                                同意协议并注册 <a href="#">《知晓用户协议》</a>
    
                            </li>
                            <input class="btn btn-info mt-2 " type="submit" value="注册" id="accept">
                    </form>
                </div>
            </div>
        </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    <script>
        function disable() {
            document.getElementById("accept").disabled = true
        }
        function enable() {
            document.getElementById("accept").disabled = false
        }
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");

    </script>
</body>

</html>